<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
		<title>openlayers-统计图显示(中国区域高亮)</title>
		<link href="v3.19.1-dist/ol.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<!-- 地图容器 -->
		<div id="mapCon" style="height: 95%;"></div>
		
		<!-- GDP图表容器 -->
		<div id="gdpChart" style="position: absolute;width:500px;height:380px"></div>
	</body>
	<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="v3.19.1-dist/ol-debug.js" type="text/javascript"></script>
    <script src="js/zondyClient.js" type="text/javascript"></script>
    <script src="js/echarts.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
		
		$(document).ready(function (){
			// 初始化天地图图层
            var layer1 = new Zondy.Map.TianDiTu({
                layerType: Zondy.Enum.Map.TiandituType.VEC,
                projection: ol.proj.get('EPSG:4326'),
                // 天地图key
                token: "e83d04f3e04272b8d9e91615e309fe36"
            });
            // 初始化地图容器
            map = new ol.Map({
                target: "mapCon",
                layers: [layer1],
                view: new ol.View({
                    center: [109.05167, 31.78305],// 地图中心点(天地图里面的经纬度)
                    zoom: 5,
					minZoom: 5,// 最大缩放级别
					maxZoom: 5,// 最小缩放级别
                    projection: "EPSG:4326"
                })
            });
			
			// 禁止鼠标拖动
			disabledMove();
			
			// 显示中国区域
			displayChina();
			
			// 创建图表对象
			var chart = new ol.Overlay({
				// 设置图表显示位置
				position: [109.05167, 31.78305],
				// 上面的经纬度就是图表的左上角、所以这里需要修补一下位置、类似css的top、margin(单位px)
				offset: [-260, -190],
				// 指定这个图表对象使用的是那个Div
				element: document.getElementById("gdpChart")
			});
			// 把图表对象添加到地图容器中
			map.addOverlay(chart);
			// 初始化GDP图表
			initCharts();
		});
		
		/** 禁止鼠标拖动 */
		function disabledMove(){
			let pan = getFun();
			pan.setActive(false);
			function getFun() {
				let pan;
				map.getInteractions().forEach(function(element, index, array) {
					if(element instanceof ol.interaction.DragPan) {
						pan = element;
					}
				})
				return pan;
			}
		}
		
		/** 显示中国区域 */
		function displayChina(){
			var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
			var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区", {
                resultFormat: "json",
                struct: queryStruct
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 20;
            //设置属性条件
            queryParam.where = "name='中国'";
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
                ip: "develop.smaryun.com",
                port: "6163"
            });
            queryService.query(function(result){
				//初始化Zondy.Format.PolygonJSON类
				var format = new Zondy.Format.PolygonJSON();
				//将MapGIS要素JSON反序列化为ol.Feature类型数组
				var features = format.read(result);

				//实例化一个矢量图层drawLayerr用于高亮显示结果
				var drawSource = new ol.source.Vector({
					//是否在地图水平坐标轴上重复
					wrapX: false
				});
				drawSource.addFeatures(features);
				drawLayer = new ol.layer.Vector({
					source: drawSource,
					style: new ol.style.Style({
						//填充色
						fill: new ol.style.Fill({
							color: 'gray'
						}),
						//边线样式
						stroke: new ol.style.Stroke({
							color: 'rgba(255,204, 51, 1)',
							width: 1
						})
					})
				});

				map.addLayer(drawLayer);
			}, function (){});
		}


        /** 初始化GDP图表 */
        function initCharts() {
            var myChart = echarts.init(document.getElementById("gdpChart"));
            var option = {
                color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['上海', '北京', '深圳', '广州', '重庆', '苏州', '成都'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '2019年经济GDP(亿)',
						type: 'bar',
						barWidth: '60%',
						data: [38155.32, 35371.30, 26927.09, 23628.60, 23605.77, 19235.80, 17012.65]
					}
				]
            };
            myChart.setOption(option);
        }
    </script>
</html>

